<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      表单元素绑定，使用 v-model 指令
        语法： v-model="xxx"

      v-model 有三个比较有用的修饰符: 修饰指令，让指令能实现更高级的功能。
        v-model.trim="xxx"    会将输入的内容去除前后空格之后再赋值给 xxx
        v-model.number="xxx"  会尝试将输入的内容转换成数值类型再赋值给 xxx
                                  如果能转换，则转换
                                  如果不能转换，不强求，保持默认的输入
        v-model.lazy="xxx"    默认是一个 onInput 事件赋值。会延迟到onChange事件时再赋值给xxx

      v-model 是一个语法糖。我们需要了解它内部展开形式是怎样：
        v-model="xxx"
          普通表单元素：v-bind:value="xxx" +  v-on:input="xxx = $event.target.value"
          单选、多选、下拉：v-bind:checked="xxx" + v-on:change="xxx = $event.target.value"
          TODO: v-model 用在组件上时会在 Vue2 与 Vue3 有一些不同。

     -->
    <div id="app">
      <h1>注册页面</h1>
      <!-- v-model 的展开形式 -->
      <div>
        <span>用户名：</span>
        <input
          type="text"
          v-bind:value="username"
          v-on:input="username = $event.target.value"
        />
      </div>

      <div>
        <span>用户名：</span>
        <input type="text" v-model.trim="username" />
      </div>
      <div>
        <span>密码：</span>
        <input type="password" v-model.lazy="password" />
      </div>
      <div>
        <span>年龄：</span>
        <input type="text" v-model.number="age" />
      </div>
      <div>
        <span>性别：</span>
        <label>
          <input type="radio" :value="1" v-model="gender" />
          <span>男</span>
        </label>
        <label>
          <input type="radio" :value="0" v-model="gender" />
          <span>女</span>
        </label>
      </div>
      <div>
        <span>爱好：</span>
        <label>
          <input type="checkbox" value="sing" v-model="likes" />
          <span>唱</span>
        </label>
        <label>
          <input type="checkbox" value="jump" v-model="likes" />
          <span>跳</span>
        </label>
        <label>
          <input type="checkbox" value="rap" v-model="likes" />
          <span>Rapper</span>
        </label>
      </div>
      <div>
        <span>城市：</span>
        <select v-model="cityId">
          <option v-for="city in citys" :key="city.id" :value="city.id">
            {{ city.name }}
          </option>
          <!-- <option value="0002">上海</option>
          <option value="0003">广州</option>
          <option value="0004">深圳</option> -->
        </select>
      </div>
      <div>
        <span>简介：</span>
        <textarea v-model="remark"></textarea>
      </div>
      <!-- 文件选择框，是无法与数据绑定的 -->
      <div>
        <span>协议：</span>
        <label>
          <input type="checkbox" v-model="flag" />
          <span>请阅读并同意我们的协议</span>
        </label>
      </div>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          username: "",
          password: "",
          gender: 0, // 0 - 女 1 - 男
          likes: ["sing", "jump", "rap"], // 爱好
          cityId: "0003", // 当前城市Id
          citys: [
            { id: "0001", name: "北京" },
            { id: "0002", name: "上海" },
            { id: "0003", name: "广州" },
            { id: "0004", name: "深圳" },
          ],
          remark: "真帅", // 简介
          flag: false, // 协议是否同意
          age: 18,
        },
      });
    </script>
  </body>
</html>
